<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
		<title>个人资料</title>
		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/infstyle.css" rel="stylesheet" type="text/css">
		
		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/sweetalert2.all.js"></script>
		<script src="../js/ajaxfileupload.js" type="text/javascript"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd" id="indexHeader">
								</div>
							</div>
						</ul>
						<ul class="message-r">
							<div class="topMessage home">
								<div class="menu-hd">
									<a href="index.html" target="_top" class="h">商城首页</a>
								</div>
							</div>
						</ul>
					</div>
					<div class="nav white">
					</div>
					<div class="clear"></div>
				</div>
				</div>
			</article>
		</header>
		<div class="nav-table">
			<h1 style="font-size: 30px;color: #FB0000;font-family: KaiTi">花鸟鱼虫特卖网</h1>
		</div>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人信息</strong></div>
						</div>
						<hr/>
						<!--个人信息 -->
						<div class="info-main">
							<form class="am-form am-form-horizontal">
								<input type="hidden" id="user-id"/>
								<div class="am-form-group" style="margin-bottom: 130px;">
                                    <label for="user-name2" class="am-form-label">头像</label>
                                    <div class="am-form-content">
                                        <input type="hidden" id="headerImg"/>
                                        <img id="img1" class="am-circle am-img-thumbnail" src="../images/no-img_mid_.jpg" alt="" style="border-radius: 10%;width:100px;height: 100px;"/>
                                        <input name="file" id="headimg" type="file" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*" onchange ="ajaxFileUpload()"/>
                                        <p style="color: red">注意：需提交保存</p>
                                    </div>
                                </div>
								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">用户名</label>
									<div class="am-form-content">
										<input type="text" id="user-name" readonly="readonly">
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-name" class="am-form-label">密码</label>
									<div class="am-form-content">
										<input type="password" id="user-password">
									</div>
								</div>

								<div class="am-form-group">
									<label class="am-form-label">性别</label>
									<div class="am-form-content sex">
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="男"> 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="女"> 女
										</label>
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-birth" class="am-form-label">年龄</label>
									<div class="am-form-content">
										<input type="number" id="user-age">
									</div>
								</div>
								
								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<input id="user-phone" type="tel">
									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">邮件</label>
									<div class="am-form-content">
										<input id="user-email" type="email">

									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">地址</label>
									<div class="am-form-content">
										<input id="user-address"  type="text">
									</div>
								</div>
								<div class="info-btn">
									<div class="am-btn am-btn-danger" onclick="update()">保存修改</div>
								</div>

							</form>
						</div>

					</div>

				</div>
			</div>

			<!--侧边栏-->
			<aside class="menu">
				<ul>
                    <li class="person active">
                        <a href="pindex.html" style="color: #222">个人中心</a>
                    </li>
                    <li class="person">
                        <p><a href="pinformation.html" style="color:#FF5E5C">个人信息</a></p>
                    </li>
                    <li class="person">
                        <p><a href="order.html">订单管理</a></p>
                    </li>
                </ul>
			</aside>
		</div>
		
		<script>
			$(function(){
				/*检验用户是否登录*/
				if (getCookie("username") == null || getCookie("userid") == null) {
                    window.location.href="login.html";
                    return;
			    }else{
			    	$("#indexHeader").append(`
                            <a href="#" target="_top" class="h">您好，${getCookie("username")}</a>
                            <a href="javascript:void(0);" onclick="clearCookie()">退出</a>`
                    );
			    }
			    
			   /*根据userid请求数据*/
			   var userid=getCookie("userid");
			   //个人信息
			   $.ajax({
			   		type:"get",
					url:"/user/info/"+userid,
					success:function(result){
						var data=result.data;
						$("#user-id").val(data.id);
						$("#user-name").val(data.username);
						$("#user-password").val(data.password);
						$("#user-age").val(data.age);
						$("#user-phone").val(data.telphone);
						$("#user-email").val(data.email);
						$("#user-address").val(data.address);
						$("#headerImg").val(data.headimg);
						$("#img1").attr("src",data.headimg);
						if(data.sex=='男'){
							$("input[name='sex'][value='男']").attr("checked",true); 
						}
						if(data.sex=='女'){
							$("input[name='sex'][value='女']").attr("checked",true);
						}
					}
			   });
			})	
		</script>
		
		<script>
			/*更新*/
			function update(){
				var id=$("#user-id").val();
				var password=$("#user-password").val();
				var age=$("#user-age").val();
				var telphone=$("#user-phone").val();
				var email=$("#user-email").val();
				var address=$("#user-address").val();
				var sex=$("input[name='sex']:checked").val();
				var headimg=$("#headerImg").val();
				if(password==''||password==null){
					swal({
							title: '密码不能为空！',
							type: 'error',
							showConfirmButton: false,
							timer: 1500
						})
					return;
				}
				
				var userdata={"id":id,
				"password":password,"telphone":telphone,"email":email,
				"address":address,"sex":sex,"age":age,"headimg":headimg};
				$.ajax({
					type:"post",
					url:"/user/update",
					data:JSON.stringify(userdata),
					async:true,
					contentType:"application/json; charset=utf-8",
					dataType: "json",
					success: function(result) {
							if(result.resultCode == 200) {
								swal({
									title: '更新成功',
									type: 'success',
									showConfirmButton: false,
									timer: 1500
								})
							} else {
								swal({
									title: '抱歉，更新失败',
									type: 'error',
									showConfirmButton: false,
									timer: 1500
								})
							}
						}
				});
			}
			
			function ajaxFileUpload() {
	            $.ajaxFileUpload({
	                    url: '/upload/picture', //用于文件上传的服务器端请求地址
	                    secureuri: false, //是否需要安全协议，一般设置为false
	                    fileElementId: 'headimg', //文件上传域的ID
	                    type:"post",
	                    dataType: "json",
	                    success: function (res){
	                        $("#img1").attr("src", res.data);
	                        $("#headerImg").val(res.data);
	                        //更新数据库
	                        /* var id=$("#user-id").val();
	                        var data={"id":id,"headimg":res.data};
	                        $.post('/user/update',JSON.stringify(data),function(rs){
	                        	
	                        }) */
	                    }
	                }
	            )
	        }
		</script>
	</body>
</html>